import React, { useState, useEffect, useCallback, useMemo, memo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useThemeStore } from "../../store/modules/theme";
import NavigationBar from "./components/NavigationBar";
import Assistant from "./components/assistant";
import Square from './components/square';

const MemoizedNavigationBar = memo(NavigationBar);
const MemoizedAssistant = memo(Assistant);
const MemoizedSquare = memo(Square);

const Home = () => {
  const themeColors = useThemeStore().theme;
  
  const location = useLocation();
  const navigate = useNavigate();
  
  const [state, setState] = useState({
    active: 0,
    userInfo: null,
    isDisabled: false,
  });
  
  const [isTabeChange, setIsTabeChange] = useState(0);
  const [checkedLang, setCheckedLang] = useState(false);
  const [isSquare, setIsSquare] = useState(false);
  const [bot_id, setBotId] = useState("app-J8oB2k4mNSwFGmOQalJQD8Oq");
  const [pageName, setpageName] = useState("问答");
  const [bot_index, setBotIndex] = useState(0);
  
  const updatecheckedLang = useCallback((newValue) => {
    setCheckedLang(newValue);
  }, []);
  
  const updateDisabled = useCallback((newValue) => {
    setState(prevState => ({
      ...prevState,
      isDisabled: newValue
    }));
  }, []);
  
  const handChange = useCallback((e) => {
    console.log('23', e);
    setIsTabeChange(e);
    
    if (e === 0) {
      setIsSquare(false);
      setpageName("文档库");
   
    }else if(e === 1){
      setpageName("问答");
   setBotId(e.bot_id);
      setBotIndex(0);
      setIsSquare(false);
    } 
    else {
      setIsSquare(true);
      setpageName("AI广场");
    }
    console.log(isSquare);
  }, [isSquare]);
  

  const handTabChange = useCallback((e) => {
    setIsTabeChange(e.index);
    setBotId(e.bot_id);
    console.log("e.bot_id",e)
    if (e.index ===0) {
      setpageName("文档库");
      setIsSquare(false);
      navigate('/home'); 
    } else if(e.index===1){
      setpageName("问答");
      setIsSquare(false);
      navigate('/home'); 
    }else{
      setIsSquare(true);
      setpageName("AI广场");
      navigate('/home/square'); 
    }
  }, [navigate]);

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const tab = params.get('tab');
    
    if (tab) {
      setState(prevState => ({
        ...prevState,
        active: Number(tab)
      }));
    }
  }, [location.pathname, location.search]);
  
  useEffect(() => {
    try {
      const userInfoString = localStorage.getItem('userInfo') || '{}';
      const userInfo = JSON.parse(userInfoString);
      
      setState(prevState => ({
        ...prevState,
        userInfo
      }));
    } catch (error) {
      console.error('Error parsing userInfo:', error);
      setState(prevState => ({
        ...prevState,
        userInfo: {}
      }));
    }
  }, []);
  
  const navigationBarProps = useMemo(() => ({
    Lang: checkedLang,
    isDisabled: state.isDisabled,
    handChange
  }), [checkedLang, state.isDisabled, handChange]);
  
  const assistantProps = useMemo(() => ({
    checkedLang: updatecheckedLang,
    checkedDisabled: updateDisabled,
    bot_id,
    pageName,
    bot_index
  }), [updatecheckedLang, updateDisabled, bot_id, pageName, bot_index]);
  
  const squareProps = useMemo(() => ({
    handTabChange
  }), [handTabChange]);
  
  return (
    <div className="main-container">

      <div className="tab-info">
        <MemoizedNavigationBar {...navigationBarProps} />
        
        {!isSquare ? (
          <MemoizedAssistant {...assistantProps} />
        ) : (
          <MemoizedSquare {...squareProps} />
        )}
      </div>
      
      <style>{`
        .main-container {
          position: relative;
          min-height: 100vh;
        }
        
        .tab-info {
          overflow: hidden;
        }
      `}</style>
    </div>
  );
};

export default Home;